import MyFormUploadButton from '@/components/MyFormUploadButton';
import { createItem, getItemDetails, updateItem } from '@/services/api/assets';
import { getList } from '@/services/api/assetTypes';
import { AssetResultItem } from '@/services/api/model/assetModel';
import { PlusOutlined } from '@ant-design/icons';
import { ModalForm, ProForm, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import { Button, Form, message } from 'antd';
import React from 'react';
type CreateFormProps = {
  onCancel?: () => void;
  onSubmit?: (values: AssetResultItem) => void;
  itemToken?: string;
  title?: string;
  trigger?: JSX.Element;
};

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const {
    onSubmit,
    itemToken,
    title = '添加',
    trigger = (
      <Button type="primary">
        <PlusOutlined />
        {title}
      </Button>
    ),
  } = props;
  const onOpenChange = () => {};

  return (
    <ModalForm<AssetResultItem>
      request={async () => {
        if (itemToken) {
          const res = await getItemDetails({ token: itemToken });
          return res;
        } else {
          return {};
        }
      }}
      title={`${title}网关`}
      modalProps={{
        // 关闭弹框是否销毁 (相当于直接进行了表单重置)
        destroyOnClose: true,
      }}
      trigger={trigger}
      onOpenChange={() => onOpenChange()}
      onFinish={async (values) => {
        console.log(values);
        if (!itemToken) {
          await createItem({
            ...values,
            brand: '',
            model: '',
            metadata: {},
          });
        } else {
          await updateItem({
            ...values,
            token: itemToken,
          });
        }
        if (onSubmit) {
          onSubmit(values);
        }
        message.success('提交成功');
        // 返回true 则关闭
        return true;
      }}
      initialValues={{}}
    >
      <ProForm.Group>
        <ProFormText
          width={'md'}
          label="Token"
          name="token"
          rules={[
            {
              required: true,
              message: '请输入Token',
            },
          ]}
          placeholder="请输入Token"
        />
        <ProFormText
          width={'md'}
          label="名称"
          name="name"
          rules={[
            {
              required: true,
              message: '请输入名称',
            },
          ]}
          placeholder="请输入名称"
        />
      </ProForm.Group>

      <ProForm.Group>
        <ProFormText
          width={'md'}
          label="MAC地址"
          name="macAddress"
          rules={[
            {
              required: true,
              message: '请输入MAC地址',
            },
          ]}
          placeholder="请输入MAC地址"
        />
        <ProFormText
          width={'md'}
          label="IP地址"
          name="ip"
          rules={[
            {
              required: true,
              message: '请输入IP地址',
            },
          ]}
          placeholder="请输入IP地址"
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          width={'md'}
          label="网关地址"
          name="gatewayAddress"
          rules={[
            {
              required: true,
              message: '请输入网关地址',
            },
          ]}
          placeholder="请输入网关地址"
        />
        <ProFormText
          width={'md'}
          label="子网掩码"
          name="subnetMask"
          rules={[
            {
              required: true,
              message: '请输入子网掩码',
            },
          ]}
          placeholder="请输入子网掩码"
        />
      </ProForm.Group>

      <ProForm.Group>
        <ProFormSelect
          width={'md'}
          name="assetTypeToken"
          label="网关类别"
          request={async () => {
            const msg = await getList({
              page: 1,
              pageSize: 0,
            });
            const results = msg?.results;
            return results.map((item) => {
              return {
                label: item.name,
                value: item.token,
              };
            });
          }}
          placeholder="请选择"
          rules={[{ required: true, message: '请选择' }]}
        />
        <Form.Item
          name="imageUrl"
          label="图片"
          rules={[
            {
              required: false,
              message: '请上传',
            },
          ]}
        >
          <MyFormUploadButton></MyFormUploadButton>
        </Form.Item>
      </ProForm.Group>
    </ModalForm>
  );
};

export default CreateForm;
